<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 轮播图 -->
    <div class="app-swiper swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="../imgs/swiper1.jpg" alt=""></div>
            <div class="swiper-slide"><img src="../imgs/swiper.png" alt=""></div>
            <div class="swiper-slide"><img src="../imgs/swiper3.png" alt=""></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>
    <!-- 主体部分 -->
    <div class="main">
        <!-- 排名打卡盒子 -->
        <div class="content">
            <div class="ranking mr20 pd15">
                <h4>今日排名</h4>
                <p id="rank">9</p>
            </div>
            <div class="punch_card pd15 ret">
                <h4>累计打卡<span id="punchIn"></span>天</h4>
                <a id="punchIn_data">今日打卡</a>
            </div>
        </div>
        <!-- 运动数据徽章 -->
        <div class="content">
            <div class="sport_data mr20 flex1 pd15">
                <h4 class="f16 fff">运动数据</h4>
            </div>
            <div class="badge flex1 pd15">
                <h4 class="f16">累积运动徽章</h4>
                <p><span id="insigniaNum">3</span>枚</p>
            </div>
        </div>
        <!-- 课程训练 户外跑步 -->
        <div class="drill mt20 pd15 course">
            <h4 class="f16 fff course">课程训练</h4>
        </div>
        <div class="running mt20 pd15 run">
            <h4 class="f16 fff">户外跑步</h4>
        </div>
    </div>

</body>

</html>